<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>发布信息</title>

    <!-- Bootstrap -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

    <style type="text/css" media="screen">
        .maintitle{ font-weight;font-family:"微软雅黑";}
    </style>
        <style type="text/css" media="screen">
        .maintitle{ font-weight;font-family:"微软雅黑";}
             .footer {
            text-align:center;
            position: relative;
            font-size:80%;
            margin-top: 30px;
            line-height:60%;
        }
    </style>
  </head>
  <body>
      <script type="text/JavaScript">
        function check(){
            var checkdate=document.getElementById("date");
            var checktel=document.getElementById("tel");
            var checkqq=document.getElementById("qq");
            if(checkdate.value==""){
                alert("您还未选择日期");
                checkdate.focus();
                return false;
            }
            if(isNaN(checktel.value)){
                alert("非法手机号码");
                checktel.focus();
                return false;
            }
            if(checktel.value.length!==11){
                    alert("手机号码必须是11位");
                    checktel.focus();
                    return false;
            }
            if(isNaN(checkqq.value)){
                alert("非法qq号码");
                checkqq.focus();
                return false;
            }            
            
        }
      </script>
    
                                                                                        <!--后端从这里开始改-->
    <div class="container">
         <h2 class="maintitle">发布信息</h2>
         <form onsubmit="return check()" action="Action.php" method="POST" name="formlostfound">
            <!--选择信息类别-->
            <div class="form-group">
                <div class="form-inline">
                    <label for="category">信息类别：&nbsp&nbsp&nbsp</label>
                    <select class="form-control" id="category" name="lost_found">
                      <option value="lost" selected>遗失信息</option>                     
                      <option value="found">招领信息</option>
                    </select>
            </div>
            </div>
            <!--选择校区-->
            <div class="form-group">
             <div class="form-inline">
             <label for="category">校区：&nbsp&nbsp&nbsp</label>
             <select class="form-control" id="#" name="position">
                <option value="north">五山校区</option>
                <option value="south">大学城校区</option>
             </select>
             </div>
            </div>
            <div class="form-group">
                <input type="text" name="title"class="form-control" placeholder="信息标题..." maxlength="20" required/>
            </div>
            <!--选择遗失物品类别-->       
            <div class="form-group">
                <fieldset>
                <div class="input-group date form_date col-md-5" data-date="" data-date-format="" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                <input type="text" name="datetime" class="form-control"  placeholder="请点击右方日历图标选择日期"   id="date" readonly >
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
                <input type="hidden" id="dtp_input2" value="" /><br/>
                </fieldset>
            </div>
            <div class="form-group">
                <input type="text" name="place"class="form-control" placeholder="地点..." required/>
            </div>
   <!--                                                                                           -->         
             <div class="form-group">
                 <div class="form-inline">
             <label for="category">物品类别：&nbsp&nbsp&nbsp</label>
             <select class="form-control" id="#" name="class">
                <option value="卡片">卡类</option>
                <option value="财物">财物</option>
                <option value="其他">其他</option>
            </select>
                 </div>
             </div>
   <!--                                                                                         -->   
            <div class="form-group">
                <textarea class="form-control" name="detail"rows="2" placeholder="详情描述..." maxlength="50" required></textarea>
            </div>
            <div class="form-group">
                <input type="text" name="contacter"class="form-control" placeholder="联系人..." required/>
            </div>
            <div class="form-group">
                <input type="text" name="tel" id="tel" class="form-control" placeholder="手机号码..." maxlength="11"/>
            </div>
            <div class="form-group">
                <input type="text" name="qq" id="qq" class="form-control" placeholder="QQ号码..." maxlength="10"/>
            </div>
            <button type="submit" class="btn btn-info">提交</button>
            <a href="output.php"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button></a>
        </form>
    </div>
    <div class="footer"><br><p>Copyright© 2015华南理工大学学生会权益部</p><p>Power by无线电爱好者协会信息部 </p></div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <!--日历控件相关js代码-->
    <script type="text/javascript" src="./js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="./js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript">
        $('.form_date').datetimepicker({
                language: 'zh-CN',
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
        });
    </script>
 </body>
</html>